<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据管理工具</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <style>
        /* (之前的样式保持不变) */
        body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; }
        .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 700px; margin: auto; } /* 稍微加宽 */
        h1 { color: #333; text-align: center; margin-bottom: 20px;}
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], select {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .button-group { margin-bottom: 15px; }
        button {
            padding: 10px 15px; margin-right: 10px; margin-bottom: 10px;
            border: none; border-radius: 4px; cursor: pointer;
            background-color: #007bff; color: white; font-size: 14px;
            transition: background-color 0.2s ease;
        }
        button:hover { background-color: #0056b3; }
        button.delete { background-color: #dc3545; }
        button.delete:hover { background-color: #c82333; }
        button.update { background-color: #ffc107; color: #333;}
        button.update:hover { background-color: #e0a800; }
        button.secondary { background-color: #6c757d; } /* 次要按钮样式 */
        button.secondary:hover { background-color: #5a6268; }
        #message, #queryResult {
            margin-top: 15px; padding: 12px; border-radius: 4px;
            border: 1px solid transparent; min-height: 20px; word-wrap: break-word;
        }
        .success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
        .info { background-color: #e2e3e5; color: #383d41; border-color: #d6d8db; }
        /* 表格样式 */
        #allDataSection { margin-top: 25px; border-top: 1px solid #eee; padding-top: 15px;}
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        tr:nth-child(even) { background-color: #f9f9f9; }
        .actions button { margin-right: 5px; padding: 5px 10px; font-size: 12px;} /* 表格内按钮小一点 */
        .actions { white-space: nowrap; }
    </style>
</head>
<body>
    <div class="container">
        <h1>简易数据管理</h1>
        <p>当前操作模块: <strong id="currentModuleDisplay"></strong></p>
        <p>当前用户: <strong>{{ username }}</strong></p>

        <div>
            <label for="moduleSelect">选择操作模块:</label>
            <select id="moduleSelect">
                {% for module in permissions %}
                    {% if module == "group_mapping" %}
                        <option value="group_mapping">群主群名映射</option>
                    {% elif module == "keyword_mapping" %}
                        <option value="keyword_mapping">关键词映射</option>
                    {% elif module == "faq_mapping" %}
                        <option value="faq_mapping">常见问题映射</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>

        <div>
            <label for="keyInput">查询值:</label>
            <input type="text" id="keyInput" placeholder="例如: 群名 / 关键词 / 问题">

            <label for="valueInput">查询结果:</label>
            <input type="text" id="valueInput" placeholder="例如: 群主 / 回复内容 / 答案">

            <div class="button-group">
                <button onclick="queryData()">查询</button>
                <button onclick="addData()">添加</button>
                <button class="update" onclick="updateData()">修改</button>
                <button class="delete" onclick="deleteData()">删除</button>
            </div>
        </div>

        <div id="message"></div>

        <h2>查询结果</h2>
        <div id="queryResult"></div>

        <div style="margin-top: 20px;">
             <button id="toggleAllDataBtn" class="secondary" onclick="toggleAllDataVisibility()">显示全部数据</button>
        </div>

        <div id="allDataSection" style="display: none;">
            <h2>当前模块全部数据 (<span id="allDataModuleTitle"></span>)</h2>
            <table id="dataTable">
                <thead>
                    <tr>
                        <th>键 (Key)</th>
                        <th>值 (Value)</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    </tbody>
            </table>
        </div>

    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>